import React, { useState } from "react";
import './index.css'
// Define the interface for images
interface Image {
  src: string; // Source URL of the image
  alt: string; // Alt text for the image
}

// Define the interface for tabs
interface Tab {
  label: string; // Text for the tab
  images: Image[]; // Array of images for this tab
}

const TabImageSwitcher: React.FC = () => {
  const tabs: Tab[] = [
    {
      label: "推荐",
      images: [
        {
          src: "https://img1.baidu.com/it/u=757204993,1406546728&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          alt: "Recommended 1",
        },
        {
          src: "https://pic.imeitou.com/uploads/allimg/221025/8-221025103158.jpg",
          alt: "Recommended 2",
        },
        {
          src: "https://p9-sign.toutiaoimg.com/pgc-image/3ed961e61546457e8586974b89d0072c~tplv-tt-large.image?x-expires=1998647345&x-signature=g%2Bxd%2BxsXQxBuPyF%2BnR4UIWRG5ls%3D",
          alt: "Recommended 3",
        },
        {
          src: "https://img2.baidu.com/it/u=4126729413,462560067&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
          alt: "Recommended 2",
        },
        {
          src: "https://img2.huashi6.com/images/resource/a365/2022/04/21/103311_39172979825.jpg?imageMogr2/quality/100/interlace/1/thumbnail/2000x%3E",
          alt: "Recommended 2",
        },
        {
          src: "https://img1.baidu.com/it/u=2324179082,2220563212&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
          alt: "Recommended 2",
        },
        {
          src: "https://img2.baidu.com/it/u=1345192204,891934847&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
          alt: "Recommended 2",
        },
        {
          src: "https://www.bugela.com/cjpic/frombd/1/253/816757745/2071250456.jpg",
          alt: "Recommended 2",
        },
      ],
    },
    {
      label: "小红书",
      images: [
        {
          src: "https://img0.baidu.com/it/u=4122936515,2075154531&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800",
          alt: "E-commerce 1",
        },
        {
          src: "http://img0.baidu.com/it/u=1544433702,1613607438&fm=253&app=138&f=JPEG?w=800&h=800",
          alt: "E-commerce 2",
        },
        {
          src: "http://img0.baidu.com/it/u=1865431501,3403115384&fm=253&app=138&f=JPEG?w=800&h=800",
          alt: "E-commerce 3",
        },
          {
          src: "http://img0.baidu.com/it/u=2865055146,1052592327&fm=253&app=138&f=JPEG?w=800&h=800",
          alt: "E-commerce 3",
        },
          {
          src: "http://img1.baidu.com/it/u=449364383,1625484103&fm=253&app=138&f=JPEG?w=800&h=800",
          alt: "E-commerce 3",
        },
          {
          src: "http://img1.baidu.com/it/u=1637876365,3694571316&fm=253&app=138&f=JPEG?w=800&h=800",
          alt: "E-commerce 3",
        },
             {
          src: "http://img1.baidu.com/it/u=78822435,3983774945&fm=253&app=138&f=JPEG?w=800&h=800",
          alt: "E-commerce 3",
        },
             {
          src: "http://img1.baidu.com/it/u=2992594707,610437180&fm=253&app=138&f=JPEG?w=800&h=800",
          alt: "E-commerce 3",
        },
     
      ],
    },
    {
      label: "电商",
      images: [
        {
          src: "http://img0.baidu.com/it/u=4116599707,2452316656&fm=253&app=138&f=JPEG?w=800&h=800",
          alt: "New Media 1",
        },
        {
          src: "http://img1.baidu.com/it/u=2916922559,3297942074&fm=253&app=138&f=JPEG?w=800&h=800",
          alt: "New Media 2",
        },
        {
          src: "https://img0.baidu.com/it/u=1863966206,1309414395&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
          alt: "New Media 3",
        },
        {
          src: "https://www.bugela.com/cjpic/frombd/0/253/607543352/3508574825.jpg",
          alt: "New Media 3",
        },
        {
          src: "https://p3-sign.toutiaoimg.com/pgc-image/ca3e900cb6d94815863a55649dd62dd3~tplv-tt-large.image?x-expires=1998647345&x-signature=KSJeMNUPz6E5L4RuMwT%2B%2BcxtXYc%3D",
          alt: "New Media 3",
        },
        {
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202204%2F20%2F20220420185531_32ce3.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1729214909&t=328055c1d8a0a23863d8c17f801c6163",
          alt: "New Media 3",
        },
        {
          src: "https://pic.imeitou.com/uploads/allimg/221025/8-221025103158.jpg",
          alt: "New Media 3",
        },
        {
          src: "https://p9-sign.toutiaoimg.com/pgc-image/3ed961e61546457e8586974b89d0072c~tplv-tt-large.image?x-expires=1998647345&x-signature=g%2Bxd%2BxsXQxBuPyF%2BnR4UIWRG5ls%3D",
          alt: "New Media 3",
        },
      ],
    },
    {
      label: "新媒体",
      images: [
        {
          src: "https://img1.baidu.com/it/u=1972191770,3024413212&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
          alt: "Private Domain 1",
        },
        {
          src: "https://img0.baidu.com/it/u=2030622948,2251212945&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
          alt: "Private Domain 2",
        },
        {
          src: "https://img2.baidu.com/it/u=4126729413,462560067&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
          alt: "Private Domain 3",
        },
        {
          src: "https://pic.imeitou.com/uploads/allimg/221025/8-221025103203.jpg",
          alt: "Private Domain 1",
        },
        {
          src: "https://img1.baidu.com/it/u=2964488942,1963377394&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
          alt: "Private Domain 2",
        },
        {
          src: "https://img1.baidu.com/it/u=4169205106,4071789682&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
          alt: "Private Domain 3",
        },
        {
          src: "https://img0.baidu.com/it/u=1456533652,1858808420&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
          alt: "Private Domain 1",
        },
        {
          src: "https://img1.baidu.com/it/u=2492685075,325570128&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
          alt: "Private Domain 2",
        },

      ],
    },
    {
      label: "私域",
      images: [
        { src: "https://www.bugela.com/cjpic/frombd/2/253/2032120895/1114712266.jpg", alt: "Mine 1" },
        { src: "https://img1.baidu.com/it/u=932365267,3641822895&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400", alt: "Mine 2" },
        { src: "https://img0.baidu.com/it/u=869758643,3927475720&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400", alt: "Mine 3" },
        { src: "https://img2.baidu.com/it/u=2357755401,2268860730&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400", alt: "Mine 1" },
        { src: "https://img0.baidu.com/it/u=782969596,3546664434&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400", alt: "Mine 2" },
        { src: "https://img2.baidu.com/it/u=1355997465,2483329575&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400", alt: "Mine 3" },
        { src: "https://www.bugela.com/cjpic/frombd/0/253/2162525967/1313095069.jpg", alt: "Mine 1" },
        { src: "https://img2.baidu.com/it/u=237431435,1190986164&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400", alt: "Mine 2" },
      ],
    },
  ];

  const [activeIndex, setActiveIndex] = useState<number>(0); // State to track the active tab

  const handleTabClick = (index: number) => {
    setActiveIndex(index); // Update the active index when a tab is clicked
  };

  return (
    <div>
      <div className="tabs">
        {tabs.map((tab, index) => (
          <button
            key={index}
            onClick={() => handleTabClick(index)}
            className={`tab-button ${activeIndex === index ? "active" : ""}`}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div className="image-row">
        {tabs[activeIndex].images.map((image, index) => (
          <img key={index} src={image.src} alt={image.alt} className="img" />
        ))}
      </div>
    </div>
  );
};

export default TabImageSwitcher;
